<template>
  <div class="ark-tag" :style="'background: url('+url+');background-size: cover;background-position: right;'">
    <div class="left" :style="'background-color:'+color">
      <i :class="icon+' icon'" />
    </div>
    <div class="right">
      <div class="title">{{ title }}</div>
      <div class="content">{{ content }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'orange'
    },
    icon: {
      type: String,
      default: 'el-icon-platform-eleme'
    },
    title: {
      type: String,
      default: 'TITLE'
    },
    content: {
      type: String,
      default: 'THIS IS TAG'
    }

  },
  data() {
    return {
      url: require('@/assets/UI_STAGE_ZONE_HOME_GROUP-1.png'),
      color: '#A34806'
    }
  },
  mounted() {
    if (this.type === 'red') {
      this.url = require('@/assets/UI_STAGE_ZONE_HOME_GROUP-2.png')
      this.color = '#710010'
    } else if (this.type === 'blue') {
      this.url = require('@/assets/UI_STAGE_ZONE_HOME_GROUP-3.png')
      this.color = '#C9D8F2'
    }
  }
}
</script>

<style lang="scss">
@import "~@/styles/ark-UI.scss";
</style>
